<template>
  <div class="detail" id="html2canvas" ref="html2canvas">
    <div class="detail_body minh389">
      <div class="turn_to_list_p_sy">
        <div class="iconfont icon-youzhijiantou1"></div>
        <div class="">当前的位置 :</div>
        <router-link to="/" class="col_nav">首页</router-link>
        <div class="icon" v-if="navSet1.title">></div>
        <router-link :to="{path:'/work',query: navSet1.query}" class="col_nav" v-if="navSet1.title">{{navSet1.title}}</router-link>
        <div class="icon" v-if="navSet2.title">></div>
        <router-link
          :to="{path:'/work',query: navSet2.query}"
          class="col_nav"
          >{{navSet2.title}}</router-link
        >
        <div class="icon">></div>
        <div class="col_nav">详情信息</div>
      </div>
      <div class="detail_content" v-if="detailInfo">
        <div class="pt1_t">
          <div class="detail_title">{{ detailInfo.title }}</div>
          <div class="msg_info">
            <span class="jian">时间 : {{ detailInfo.time }}</span>
            <span class="jian">来源 : {{ detailInfo.author }}</span>
            <span class="jian">点击数 : {{ detailInfo.lookcount }}</span>
          </div>
        </div>
        <div class="pt2_content v_html_img" v-html="detailInfo.content"></div>
        
        <div class="pt3_ctrl" v-if="detailInfo.file" >
          <div class="funxiang">
            <div class="te">下载 :</div>
            <vshare :vshareConfig="vshareConfig"> </vshare>
          </div>
          

            <a :href="http + detailInfo.file" class="file_down_a">
              <el-button size="mini" type="primary">下载附件</el-button>
            </a>
          
        </div>
        <!-- <div class="pt3_ctrl" >
          <div class="funxiang">
            <div class="te">下载 :</div>
            <vshare :vshareConfig="vshareConfig"> </vshare>
          </div>
          <el-button
            class="save_btn"
            size="mini"
            @click="saveImage('html2canvas', detailInfo.title)"
            >生成图片</el-button
          >
        </div> -->
        <!-- <div class="pt4_nav">
          <div class="nav_detail">
            <div class="name_c">上一篇 :</div>
            <div class="nav_to" @click="nativeTo(detailInfo.pro)">
              {{ detailInfo.pro.title }}
            </div>
          </div>
          <div class="nav_detail">
            <div class="name_c">下一篇 :</div>
            <div
              class="nav_to"
              v-if="detailInfo.next"
              @click="nativeTo(detailInfo.next)"
            >
              {{ detailInfo.next.title }}
            </div>
            <div class="nav_to" v-if="!detailInfo.next">
              {{ detailInfo.next.title }}
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import _ from 'lodash'
export default {
  components: {},
  data() {
    return {
      vshareConfig: {
        shareList: [
          // 此处放分享列表（ID）
        ],
        common: {
          //此处放置通用设置
        },
        share: [
          {
            //此处放置分享按钮设置
          },
        ],
        slide: [
          //此处放置浮窗分享设置
        ],
        image: [
          //此处放置图片分享设置
        ],
        selectShare: [
          //此处放置划词分享设置
        ],
      },
      detailInfo: null,
      thisId:"",
      parentId:"",
      type:"",
      from:"",
      http:"",
      navListTop:[],
      PageKey:"",
      sel:"",
      navSet1:{},
      navSet2:{}
    };
  },
  beforeMount() {
    this.http = this.$apiUrl;
    let thisRouter = this.$route.query;
    this.thisId = thisRouter.thisId;
    this.parentId = thisRouter.parentId;
    this.type = thisRouter.type;
    if(thisRouter.key){
      this.PageKey = Number(thisRouter.key);
      this.sel = Number(thisRouter.sel)
      this.$getApi("/Common/navlist",{}).then(res=>{
        this.navListTop = res.data;
        console.log(this.navListTop)
        let scc = this.navListTop[this.PageKey - 1]
        this.navSet1 = {
          title:scc.title,
          query:{sel:0,key:this.PageKey}
        }
        this.navSet2 = {
          title:scc.children[this.sel].title,
          query:{sel:this.sel,key:this.PageKey}
        }
      })
    }else{
      this.navSet1 = {};
      this.navSet2 = {};
    }
    if(thisRouter.from == "home"){
      this.getContentHome(this.parentId)
    }else{
      this.getContentHome(this.thisId)
    }
    
  },
  watch: {
    $route(to) {
      let thisRouter = to.query;
      this.thisId = thisRouter.thisId;
      this.parentId = thisRouter.parentId;
      this.type = thisRouter.type;
      this.getContent(this.parentId,this.type)
    },
  },
  mounted() {},
  methods: {
    getContent(id,type){
     
      console.log(id,type)
      this.$getApi("/Common/content",{id:id,type:type}).then(res=>{
      // this.$getApi("/common/articlelist",{id:id,type:type}).then(res=>{
        console.log(res.data )
        this.detailInfo = _.filter( res.data ,item=>{
          return item.id == this.thisId
        })[0]
        console.log(this.detailInfo)
      })
    },
    getContentHome(id){
       this.$getApi("/Common/articlexaingqing",{id:id}).then(res=>{
        console.log(res.data )
        this.detailInfo = res.data
        console.log(this.detailInfo)
      })
    },
    nativeTo(item) {
      console.log(item);
    },
    dataURLToBlob(dataurl) {
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    saveImage(divText, imgText) {
      this.goTop();
      setTimeout(() => {
        let canvasID = this.$refs[divText];
        let that = this;
        let a = document.createElement("a");
        html2canvas(canvasID, {
          dpi: 300,
          useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
        }).then((canvas) => {
          let dom = document.body.appendChild(canvas);
          dom.style.display = "none";
          a.style.display = "none";
          document.body.removeChild(dom);
          let blob = that.dataURLToBlob(dom.toDataURL("image/png"));
          a.setAttribute("href", URL.createObjectURL(blob));
          //这块是保存图片操作  可以设置保存的图片的信息
          a.setAttribute("download", imgText + ".png");
          document.body.appendChild(a);
          a.click();
          URL.revokeObjectURL(blob);
          document.body.removeChild(a);
        });
      }, 200);
    },
    goTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
  },
};
</script>
<style lang="stylus">

  .file_down_a{
    display inline-block
  }

.social-share {
  width: 600px;
  height: 120px;
}
.pt2_content {
  
  .p_s, .p_suo {
    font-size: 16px;
    line-height: 30px;
  }
  img{
    width 100% !important
    height auto !important
    padding 10px 0
  }
}
</style>
<style scoped lang="stylus">
.detail_body {
  width: 1000px;
  margin: 0 auto;

  .detail_content {
    border: 2px solid #ddd;
    border-radius: 4px;
    padding: 20px 26px;
  }

  .detail_content {
    .pt1_t {
      text-align: center;
      border-bottom: 1px solid #ddd;
      margin-bottom: 20px;

      .detail_title {
        font-size: 22px;
        // font-weight bold
        // color:#333
      }

      .msg_info {
        padding: 20px 0 10px;
        color: #666;

        .jian {
          padding-right: 20px;
        }
      }
    }

    .pt2_content {
      
      .p_s, .p_suo {
        font-size: 16px;
        line-height: 30px;
      }
    }

    .pt3_ctrl {
      padding-top: 20px;
      display: flex;
      align-items: center;

      .funxiang {
        display: inline-flex;

        .te {
          padding-right: 10px;
        }
      }

      .save_btn {
        margin-left: 30px;
      }
    }

    .pt4_nav {
      padding: 10px 0 0px;
      border-top: 1px solid #ddd;
      margin-top: 10px;

      .nav_detail {
        display: flex;
        padding: 6px 0;
        align-items: center;

        .name_c {
          color: #f00;
        }

        .nav_to {
          cursor: pointer;
          margin-left: 10px;
          font-size: 15px;
        }
      }
    }
  }
}
</style>
